<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0" />
    <meta name="format-detection" content="telephone=no">
    <title>预览页</title>
    <link rel="stylesheet" href="templates/preview/css/swiper-3.3.1.min.css">
    <script src="templates/preview/js/swiper-3.3.1.min.js"></script>

    <link rel="stylesheet" href="templates/preview/css/common.css">
    <link rel="stylesheet" href="templates/preview/css/main.css">
    <script src="templates/preview/js/zepto.js"></script>
    <script src="templates/preview/js/iscroll-probe.js"></script>
    <style>
        /*下拉加载样式*/
        #wrapper {
            position: absolute;
            z-index: 1;
            top: 0;
            bottom: 0;
            left: 0;
            width: 100%;
            overflow: hidden;
        }
        #loadBin{color: #5d5d5d;text-align: center;line-height: 30px;}
    </style>
</head>
<body onLoad="onload()">
<!--正文区域-->
<div id="fenleiTop">
    <div class="top1" style="background: #444">
        <img style="float: right; margin-right: 10px;width:15px;height: 15px;" src="templates/style/images/close.gif" id="btn-close"/>
        {$theme.banner_remark}
    </div>
</div>
<div id="fenleiMain" class="fastscroll" style="top: 50px;">
    <div id="wrapper" >
        <div class="maxWidth">
            <!--轮播不放到ul里面-->
            <div class="lunbo maxWidth">
                <div class="swiper-container">
                    <div class="swiper-wrapper">
                        <div class="swiper-slide">
                            <a href="javascript:;" style="background-image:url({$theme.detail_url})"></a>
                        </div>
                    </div>
                    <div class="swiper-pagination" style="display: none"></div>
                </div>
            </div>
            <input type="hidden" name="banner_id" value="{$theme.banner_id}">
            <ul class="list content clear maxWidth">
                <!--{foreach from=$theme.goods item=bg}-->
                    <li>
                        <img style="height:160px;" src="{$bg.default_image}">
                        <p class="title">{$bg.goods_name}</p>
                        <p class="price clear">
                            <em>&yen;{$bg.first_cost_price}</em>
                            <del>&yen;{$bg.market_price}</del>
                        </p>

                    </li>
                <!--{/foreach}-->
            </ul>
            <div id="loadBin"></div>
        </div>
    </div>
</div>

<script>
    //返回按钮
    $('#fenleiTop .top1 .back').on('click',function(){
        window.history.go(-1);
    });
    $("#btn-close").click(function () {
        window.parent.$('.bg-model'+{$theme.banner_id}).hide();
    })

    //轮播
    // var mySwiper = new Swiper('#fenleiMain .lunbo .swiper-container', {
    //     autoplay: 3000,
    //     loop:true,
    //     autoplayDisableOnInteraction:false,
    //     pagination : '.swiper-pagination'
    // });

    //导航区域，根据内容确定宽度
    var navlis=$('#fenleiTop .top2 ul li');
    var ulWidth=0;
    for(var i=0;i<navlis.length;i++){
        ulWidth+=$(navlis[i]).width();
    }
    $('#fenleiTop .top2 ul').width(ulWidth+4);

    //点击 右上角 筛选 跳转到搜索列表，并打开筛选侧边栏
    // $('#fenleiTop .top1 a').on('click',function(){
    //     location.href='搜索列表.html?shaixuan=true';
    // });

    //点击商品列表 跳转到商品详情
    // $('#fenleiMain .content').on('click','li',function(){
    //     location.href='商品详情.html';
    // });

    //iscroll 下拉加载+zeptoajax
    function onload(){
        loadBin = document.getElementById("loadBin");
        myScroll = new IScroll('#wrapper',{
            probeType: 3,
            click:true
        });
        myScroll.on("scroll",scrollFun);
        myScroll.on("scrollEnd",scrollEndFun);
    }
    var page=1;
    var banner_id = $("input[name=banner_id]").val();
    var myScroll,
        loadBin,
        isload = false,
        scrollFun = function(){
            if((this.y - this.maxScrollY)>>0 < -50){
                isload = true;
                loadBin.innerHTML = "松开手指加载更多";
                myScroll.refresh();
                myScroll.off("scroll",scrollFun);
            }
        },
        scrollEndFun = function(){
            if(isload){
                isload = false;

                $.ajax({
                    type: 'POST',
                    url: 'index.php?app=banner_setting&act=previewJson',
                    dataType: 'json',
                    data: {page:page, banner_id:banner_id},
                    success: function(data){
                        console.log(data)
                        page++;
                        for(var i=0;i<data.lists.length;i++){
                            $('#wrapper .list').append('<li><img style="height:160px;" src="../'+data.lists[i].default_image+'"> <p class="title">'+data.lists[i].goods_name+'</p> <p class="price clear"> <em>&yen;'+data.lists[i].first_cost_price+'</em> <del>&yen;'+data.lists[i].market_price+'</del></p></li>');
                        }
                        loadBin.innerHTML = "";
                        myScroll.on("scroll",scrollFun);
                        myScroll.refresh();
                    },
                    error: function(xhr, type){
                        console.log('Ajax error!');
                    }
                });
            }
        };

    // //导航区域 点击切换active
    // $('#fenleiTop .top2 li').on('click',function(){
    //     $(this).addClass('active').siblings().removeClass('active');
    //     page=1;
    //     $('#wrapper .list').html('');
    //
    //     //切换tab的时候，让滚动条在顶部
    //     myScroll._translate(0,0);//查看源码，里面提供方法
    //
    //     $.ajax({
    //         type: 'GET',
    //         url: 'data/分类.html',
    //         dataType: 'json',
    //         success: function(data){
    //             page++;
    //             for(var i=0;i<data.lists.length;i++){
    //                 $('#wrapper .list').append('<li><img src="'+data.lists[i].pic+'"><p class="title">'+data.lists[i].title+'</p><p class="price clear"><em>&yen;'+data.lists[i].chipPrice+'</em><del>&yen;'+data.lists[i].guiPrice+'</del></p><p class="peoplemai clear"><span class="people">已有<em>'+data.lists[i].goumaiPeopleNum+'</em>人购买</span><a class="tui" href="javascript:;">推</a><a class="fan" href="javascript:;">返</a></p></li>');
    //             }
    //             myScroll.refresh();
    //         },
    //         error: function(xhr, type){
    //             console.log('Ajax error!');
    //         }
    //     });
    // });

    //让图片的高度等于图片的宽度  图片宽度是不确定值
    // $('#fenleiMain .content li img').height($('#fenleiMain .content li img').width());

    //防止加载慢 小圈从左侧滑动到中间
    window.addEventListener('load',function(){
        $('.swiper-pagination').css('display','block');
    },false);
</script>
</body>
</html>